@page "/selectcontrol"
@inherits BasePage
@using MduiBlazor.Shared.Pages.Examples.SelectControls

<PageTitle>选择控件</PageTitle>
<div class="mdui-m-y-5">
    <MduiText Typo="@Typo.display1" TextColor="@Colors.Theme.Primary">选择控件</MduiText>
    <p>选择控件包括复选框、单选框和开/关切换。</p>
</div>

<PageContent>
    <PageContentItem Title="示例" OnClick="@(_=>ScrollToElementById("examples"))">
        <PageContentItem Title="单选框" OnClick="@(_=>ScrollToElementById("radio"))" />
        <PageContentItem Title="复选框" OnClick="@(_=>ScrollToElementById("checkbox"))" />
        <PageContentItem Title="开关切换" OnClick="@(_=>ScrollToElementById("switch"))" />
    </PageContentItem>
    <PageContentItem Title="组件参数" OnClick="@(_=>ScrollToElementById("attr"))" />
</PageContent>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="examples">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">示例</MduiText>
    </h2>

    <MduiText id="radio" Typo="@Typo.subheading"><b>单选框</b></MduiText>
    <ExampleSection Component="@typeof(Radio)" />

    <MduiText id="checkbox" Typo="@Typo.subheading"><b>复选框</b></MduiText>
    <ExampleSection Component="@typeof(Checkbox)" />

    <MduiText id="switch" Typo="@Typo.subheading"><b>开关切换</b></MduiText>
    <ExampleSection Component="@typeof(Switch)" />
</div>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="attr">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">组件参数</MduiText>
    </h2>

    <MduiTableContainer UseMduiTypo Class="mdui-m-y-1">
         <MduiSimpleTable>
             <thead>
                 <th>组件</th>
                 <th>参数名称</th>
                 <th>类型/返回类型</th>
                 <th>说明</th>
             </thead>
             <tbody>
                 <tr>
                     <td>
                         <code>MduiRadioGroup&lt;TValue&gt;</code>
                     </td>
                     <td>
                         <code>Vertical</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>单选项是否竖向排列，默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td rowspan="6">
                         <code>MduiRadio&lt;TValue&gt;</code>
                     </td>
                     <td>
                         <code>Name</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td><code>radio</code>标签的<code>name</code>属性。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Label</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td>标签显示的文本。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Checked</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否选中，默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Value</code>
                     </td>
                     <td>
                         <code>TValue?</code>
                     </td>
                     <td>单选项的值。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Readonly</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否只读，默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Disabled</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否禁用，默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td rowspan="2">
                         <code>MduiCheckbox</code>
                     </td>
                     <td>
                         <code>Switch</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否渲染为开关模式，默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Label</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td>标签显示的文本。</td>
                 </tr>
             </tbody>
         </MduiSimpleTable>
     </MduiTableContainer>
 </div>